
<template>
	<div>
		<el-form :inline="true"  class="demo-form-inline">
			<el-form-item label="">
				<el-input  placeholder="文章标题" v-model="inputTitle"></el-input>
			</el-form-item>
			<el-form-item label="">
				<el-date-picker
						v-model="timeValue"
						type="date"
						format="yyyy-MM-dd"
						value-format="yyyy-MM-dd"

				>
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="searchSomthing" >查询</el-button>
			</el-form-item>
		</el-form>
		<datatable class="ch" :datalist="tableData" :currentPage="currentPage" :limit="limit"></datatable>
		<el-pagination layout="total, prev, pager, next"
					   @current-change="pageNumberChange"
					   :page-size="limit"
					   :pager-count="5"
					   :total="total"></el-pagination>
	</div>
</template>

<script>
	import datatable from '../../components/DataTable.vue'
	import Table from "@/apis";
	export default{
		name:'Content',
		data(){
			return {
				inputTitle: "",
				timeValue: "",
				tableData: [],
				currentPage: 1,
				total: 0,
				limit:5
			}
		},


		components:{
			datatable
		},
		created() {
			this.searchSomthing()
		},
		methods:{
			// 查询按钮绑定的方法
			searchSomthing() {
				this.currentPage=1
				this.getPageDataCondition()
			},
			// 条件分页查询
			async getPageDataCondition(page = 1) {
				this.timeValue=this.timeValue==null? '':this.timeValue;
				console.log(this.timeValue);
				return await Table.getDataByPageWithCondition(page,this.limit,this.inputTitle.trim(),this.timeValue.trim()).then(res=>{

					// console.log(res.datasone.datasone)


					this.tableData = res.data.data
					this.total = res.data.total
				})
			},
			// 分页条页码改变响应事件
			pageNumberChange(val) {
				this.currentPage = val
				this.getPageDataCondition(val)

			},

		}
	}
</script>

<style>
	.el-table__header{
		line-height: 20px;
	}
	.demo-form-inline{
		line-height: 30px;
	}
</style>











<!--
<template>
	<div>
		<el-form :inline="true"  class="demo-form-inline">
			<el-form-item label="文章标题">
				<el-input  placeholder="文章标题" v-model="inputTitle"></el-input>
			</el-form-item>
			<el-form-item label="发表日期">
				<el-input  placeholder="文章标题" v-model="timeValue"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" >查询</el-button>
			</el-form-item>
		</el-form>
		<datatable :datalist="tableData"></datatable>
	</div>
</template>

<script>
	import datatable from '../../components/DataTable.vue'
	import Table from "@/apis";
	export default{
		name:'Content',
		data(){
			return {
				inputTitle: "",
				timeValue: '',
				tableData: [],
				currentPage: 1,
				total: 0,
				limit:5
			}
		},


		components:{
			datatable
		},
		created() {
			this.getPageData()
		},
		methods:{
			// 分页查询
			async getPageData(page = 1) {
				return await Table.getDataByPage(page, this.limit).then(res => {
					this.tableData = res.data.data
					this.total = res.data.total
					console.log( this.tableData );
				})
			},
		}
	}
</script>

<style>
</style>
-->















